<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="layui-btn-group demoTable">
	  <button id="insert" class="layui-btn">添加</button>
	  <button id="deleteAll" class="layui-btn">批量删除</button>
	  <button class="layui-btn">验证是否全选</button>
	</div>
	
	<table class="layui-hide" id="test" lay-filter="tableFilter"></table>	
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	</script>
	
	<script type="text/html" id="statusTpl">
		{{#	  if(d.status == 1) {   		}}
				   在售
		{{#	  } else if(d.status == 2){   	}}
				   下架
		{{#	  } else if(d.status == 3) {	}}
			                删除
		{{#	  }								}}
	</script>
	
	<script type="text/html" id="mainImageTpl">
		<img src="/pic/{{d.mainImage}}"></img>
	</script>

	
	<script type="text/javascript">
	layui.use('table', function(){
		  var table = layui.table;
		  table.render({
		    elem: '#test'
		    ,url:'${path}/product/selectByPage.action'
		    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		    ,cols: [[
		      {field:'id', title: '商品ID', sort: true}
		      ,{field:'name', title: '商品名称'}
		      ,{field:'subtitle', title: '商品子标题', sort: true}
		      ,{field:'main_imge', title: '产品主图',templet:'#mainImageTpl'}
		      ,{field:'price', title: '价格'} 
		      ,{field:'stock', title: '库存'} 
		      ,{field:'status', title: '状态', templet:'#statusTpl'} 
		      ,{field:'createTime', title: '创建时间', templet:"<div>{{d.createTime?layui.util.toDateString(d.createTime, 'yyyy-MM-dd'):'未知'}}</div>"} 
		      ,{field:'updateTime', title: '更新时间', templet:"<div>{{d.createTime?layui.util.toDateString(d.createTime, 'yyyy-MM-dd'):'未知'}}</div>"}
		      ,{toolbar:'#barDemo' , width:120 , fixed:'right'}
		    ]]
		      ,page:true
		      ,id:'tableReload'
		  });
		  //监听工具条
		    table.on('tool(tableFilter)', function(obj){
		      var data = obj.data;
		      if(obj.event === 'del'){
		        layer.confirm('真的删除行么',{icon:3}, function(index){
		        	console.log(data);
		        	$.post('${path}/user/deleteById.action',
		        			{'id':data.id},
		        			function(jsonResult){
		        				if(jsonResult.ok) {
		        					layer.msg(jsonResult.msg,
		        							{icon : 1 , time : 2000},
		        							function(){
		        								table.reload('tableReload');
		        							}
		        					);
		        				} else{
		        					mylayer.errorMsg(jsonResult.msg);
		        				}
		        			},
		        			'json'
		        			);
		        });
		      } else if(obj.event === 'edit'){
		    	  
		      }
		    });
		  
		  $("#insert").on('click' , function(){
			  console.log('insert');
			  layer.open({
				  		type : 2,
				  		area : ['800px','550px'],
				  		content : '${path}/product/getProductInsertPage.action'
					});
		  });
		  
		  $('#deleteAll').on('click',function(){
			  var checkStatus = table.checkStatus('tableReload');
			  var data = checkStatus.data;	//data是一个数组
			  var ids = new Array();
			  $(data).each(function(){
				  ids.push(this.id);
			  });
			  var idsStr = ids.join(',');	//把数组ids用逗号拼接成字符数组
		  
			  $.post('${path}/product/deleteAll.action',
					  {'ids' : idsStr},
					  function(jsonResult){
						  if (jsonResult.ok) {
							layer.msg(jsonResult.msg,
									{icon : 1, time : 2000},
									function(){
										table.reload('tableReload');
									}
								);		
						  } else {
							  mylayer.errorMsg();
						  }
					  },
					  'json'
				);
		  });
		    
		});		
	</script>
</body>
</html>